<template>
  <div class="homeMain" style="height: 100%; background: #f2f2f2">
    <div class="homeMain_top">
      <div class="list">
        <i
          class="el-icon-document-copy"
          style="font-size: 70px; color: #ffcc00"
        ></i>
        <div>
          <p class="colorccc">总订单</p>
          <p>{{totalOrder}}</p>
        </div>
      </div>
      <div class="list">
        <i
          class="el-icon-s-data"
          id="iii"
          style="font-size: 70px; color: #99cc33"
        ></i>
        <div>
          <p class="colorccc">总销售额</p>
          <p>￥{{totalAmount}}</p>
        </div>
      </div>
      <div class="list">
        <i class="el-icon-document" style="font-size: 70px; color: #f56c6c"></i>
        <div>
          <p class="colorccc">今日订单数</p>
          <p>{{todayOrder}}</p>
        </div>
      </div>
      <div class="list">
        <i style="font-size: 70px; color: #409eff" class="el-icon-present"></i>
        <div>
          <p class="colorccc">今日销售额</p>
          <p>￥{{totayAmount}}</p>
        </div>
      </div>
    </div>

    <div class="homeMain_bottom" id="exhartsMain"></div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import { totaldata } from "@/apis/echarts";

export default {
    data(){
        return{
        totalOrder:'',
        totalAmount:'',
        todayOrder:'',
        totayAmount:'',
        }
        
    },
  mounted() {
    totaldata({}).then((res) => {
      // console.log(res.data);
      this.totalOrder=res.data.totalOrder
      this.totalAmount=res.data.totalAmount
      this.todayOrder=res.data.todayOrder
      this.totayAmount=res.data.totayAmount

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("exhartsMain"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "金额数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "总量",
            data: res.data.orderData,
          },
          {
            name: "金额数据",
            type: "line",
            stack: "总量",
            data:res.data.amountData,
          },
        
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      this.$bus.emit('subTitle','首页>')
    });
  },
};
</script>

<style lang="less" scoped>
.homeMain {
  margin: -20px;
  padding-bottom: 40px;
}
.homeMain_top {
  padding: 20px 40px 40px 40px;
  display: flex;
  justify-content: space-between;
  height: 100%;

  .list {
    // margin:  20px;
    text-align: center;
    background: #fff;
    height: 80px;
    width: 18%;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    img {
      width: 80px;
      height: 100%;
    }
    p {
      margin-top: 10px;
    }
  }
}

.homeMain_bottom {
  background: #fff;
  //    width: 100%;
  height: 450px;
  margin: 0 40px 0 40px;
}
</style>